<template>
    <div class="page">
        <div class="info">
            <h1 class="title fadeInRight" :class="{done:showTitle}"></h1>
            <ul class="fadeInRight" :class="{done:showUl}">
                <li class="fadeInRight" :class="{done:showLi[0]}">
                    <h6>13:30</h6>
                    <p>嘉宾/媒体签到</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[1]}">
                    <h6>14:00</h6>
                    <p>主持人开场白&介绍嘉宾</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[2]}">
                    <h6>14:05</h6>
                    <p>嘉宾演讲：《凹凸租车：加速服务体系升级，创造全新共赢局面》——凹凸租车公关总监 刘倩</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[3]}">
                    <h6>14:30</h6>
                    <p>嘉宾演讲：《出险代步车产品解读：以极致服务实现长远共赢》——凹凸租车业务拓展总监 申伊娜</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[4]}">
                    <h6>14:50</h6>
                    <p>嘉宾演讲：《代步车商业合作分享》——中国太平洋财产保险股份有限公司南京分公司车险总监 陈鸿铭</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[5]}">
                    <h6>15:15</h6>
                    <p>出险代步车用户体验分享</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[6]}">
                    <h6>15:30</h6>
                    <p>出险代步车合作签约仪式</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[7]}">
                    <h6>15:40</h6>
                    <p>主持人结束语&合影留念</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[8]}">
                    <h6>15:40</h6>
                    <p>茶歇</p>
                </li>
            </ul>
        </div>
        <div class="bg fadeBg" :class="{done:done}"></div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['animate'],
    data () {
        return {
            done: false,
            showTitle: false,
            showUl: false,
            showLi: [false, false, false, false, false, false, false, false, false],
        }
    },
    methods: {
        pageInit() {
            this.done = true;
            setTimeout(() => {
                this.showTitle = true;
            }, 200);
            setTimeout(() => {
                this.showUl = true;
            }, 400);
            for(let i = 0; i < 10; i++) {
                setTimeout(() => {
                    this.showLi.splice(i, 0, true);
                }, 600 + 150 * i);
            }
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p4.jpg");
        background-position: center center;
        background-size: cover;
    }
    .info {
        position: absolute;
        z-index: 2;
        width: 100%;
        padding: 0.8rem 0.8rem 0 0.8rem;
        .title {
            display: block;
            margin-bottom: 0.3rem;
            width: 2.78rem;
            height: 0.66rem;
            z-index: 2;
            background: url("../assets/images/title_p4.png");
            background-size: 100% 100%;
        }
        p {
            display: block;
            color: #fff;
            font-size: 0.28rem;
            line-height: 1.3;
            font-weight: 100;
            text-align: justify;
            margin-bottom: 0.1rem;
        }
        h6 {
            display: block;
            color: #41a3ff;
            font-size: 0.34rem;
            line-height: 0.4rem;
            height: 0.4rem;
            font-weight: bold;
            text-align: justify;
            position: absolute;
            left: -3.3em;
            top: 0;
            width: 2.5em;
        }
        ul {
            position: relative;
            padding-left: 5em;
            &:before {
                position: absolute;
                content: "";
                display: block;
                width: 0.04rem;
                height: 100%;
                background: #41a3ff;
            }
            li {
                position: relative;
                padding-left: 0.3rem;
                &:before {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 0.24rem;
                    height: 0.24rem;
                    background: #41a3ff;
                    top: 0.06rem;
                    left: -0.1rem;
                    border-radius: 50%;
                }
                padding-bottom: 0.05rem;
            }
        }
    }
}
</style>
